{% extends 'base.html' %}

{% block title %}
    惠房网-{{ city }}租房信息-{{ datas.title }}
{% endblock %}

{% block styles %}
    {{ super() }}
    <!-- 引入租房详情页样式文件rentdetail.css -->
    <link rel="stylesheet" href="{{ url_for('static',filename='css/renthouse/rentdetail.css') }}">
{% endblock %}

{% block content %}

    {% block newcontent %}
        <!-- 头部区域 -->
        <header class="headers">
            <div class="w">
                <div class="title">
                    <!-- logo模块 -->
                    <a href="{{ url_for('house_bp.renthouse',city=city) }}" class="logo" title="{{ city }}租房">
                        <img src="{{ url_for('static',filename='images/hz_logo.png') }}" alt="" title="{{ city }}租房">
                        <span>惠房租房</span>
                    </a>
                    <span class='split'></span>
                    <a href="{{ url_for('house_bp.city') }}" class="s-city">
                        {{ city }}
                    </a>

                    <!-- 区域 -->
                    <ul class="most-area">
                        <li><a href="{{ url_for('house_bp.index') }}?city={{ city }}">首页</a></li>
                        <li><a href="{{ url_for('house_bp.renthouse',city=city) }}">出租</a></li>
                        <li><a href="javascript:;" class='check'>在售</a></li>
                        <li><a href="javascript:;">惠房指数</a></li>
                        <li><a href="javascript:;">出租手册</a></li>
                    </ul>
                </div>
                <div class="bottom">
                    <span>{{ city }}惠房网 &nbsp;&nbsp;>&nbsp;&nbsp;</span>
                    <span>{{ datas.area_name }}租房 &nbsp;&nbsp;>&nbsp;&nbsp;</span>
                    <span>{{ datas.shop_name }}租房 &nbsp;&nbsp;>&nbsp;&nbsp;</span>
                    <span>{{ datas.community }}租房</span>
                </div>
            </div>
        </header>
        <!-- 出租图片 -->
        <div class="Central w clearfix">
            <div class="central-hd">
                <p class="title">{{ datas.title }}</p>
                <div class="content">
                    <span class="maintain">房源维护时间：{{ datas.maintain_time }}</span>
                    <span class="housecode">
                        {% if datas.check_code %}
                            <img src="{{ url_for('static',filename='images/yan.png') }}" alt="">
                            {{ city }}市房产局核验码：{{ datas.check_code }}
                        {% else %}
                            <p>房源编号：{{ datas.rent_id }}</p>
                        {% endif %}
                    </span>
                </div>
                <div class="contactcode">联系方式：{{ datas.broker.contact }}</div>
            </div>
            <div class="central-bd">
                <!-- 左侧图片 -->
                <div class="imgs">
                    <img src="{{ datas.house_img }}" alt="">
                </div>
                <!-- 右侧数据 -->
                <div class="datalist">
                    <!-- 出租价格 -->
                    <div class="price">
                        <span class="title">参考价格</span>
                        <span class="price-number">{{ datas.rent_price }}</span>
                        <span class="unit">元/月(月付价)</span>
                    </div>
                    <!-- 房源户型、朝向、面积、租赁方式 -->                    
                    <div class="datainfo">
                    <ul class="result-list">
                        <li class="result-item">
                            <span class="title">租赁方式</span>
                            <span class="content">{{ datas.lease_mode }}</span>
                        </li>
                        <li class="result-item">
                            <span class="title">房屋类型</span>
                            <span class="content">{{ datas.house_type }} / {{ datas.area }}</span>
                        </li>
                        <li class="result-item">
                            <span class="title">朝向楼层</span>
                            <span class="content">{{ datas.house_face }}&nbsp;&nbsp;{{ datas.floor }}</span>
                        </li>
                        <li class="result-item">
                            <span class="title">小区地址</span>
                            <span class="content">{{ datas.area_name }}-{{ datas.shop_name }}-{{ datas.community }}</span>
                        </li>
                        <li class="result-item">
                            <span class="title">风险提示</span>
                            <span class="content">
                                <a href="#">用户出租风险提示</a>
                            </span>
                        </li>
                    </ul>
                    </div>
                    <!-- 经纪人 -->
                    <div class="brokerInfo">
                        <div class="broker-hd">
                            <div class="brokerimg">
                                <a href="#broker">
                                    <img src="{{ datas.broker.broker_img }}" alt="{{ datas.broker.broker_name}}">
                                </a>
                            </div>
                            <div class="brokercon">
                                <div class="brokername">
                                    <span class="name">{{ datas.broker.broker_name }}</span>
                                    <span class="card">
                                        <img src="{{ url_for('static',filename='images/carte.png') }}" alt="">
                                    </span>
                                </div>
                                <div class="broetxt">
                                    <span>租房经纪人，熟悉本房特色</span>
                                </div>
                            </div>
                        </div>
                        <div class="broker-bd">
                            <div class="contact">
                                {{ datas.broker.contact }}
                            </div>
                            <div class="advisory">
                                <i></i>
                                <a href="#broker">
                                    <span>咨询</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 导航栏 -->
        <div class="navigation w">
            <ul class="navleft">
                <li><a href="#basicdata">房屋信息</a></li>
                <li><a href="#costdetail">费用详情</a></li>
                <li><a href="#broker">经纪人</a></li>
                <li><a href="javascript:;">位置周边</a></li>
                <li><a href="javascript:;">附近房源</a></li>
                <li><a href="javascript:;">热门房源</a></li>
            </ul>
            <div class="navright">
                <span class="fr">
                    <p class="dh">电话咨询</p>
                </span>
                <span class="fl">
                    <p class="yy">预约看房</p>
                </span>
            </div>
        </div>

        <!-- 房屋信息 -->
        <div class="basicInformation w" id="basicdata">
            <div class="widths">
                <h2>房屋信息</h2>
                <div class="introContent">
                    <!-- 基本信息 -->
                    <div class="basic">
                        <div class="name">基本信息</div>
                        <div class="content">
                            <ul>                    
                                <li>
                                    <span class="lables">面积</span>
                                    {{ datas.area }}
                                </li>
                                <li>
                                    <span class="lables">朝向</span>
                                    {{ datas.house_face }}
                                </li>
                                <li>
                                    <span class="lables">维护</span>
                                    {{ datas.maintain_time }}
                                </li>
                                <li>
                                    <span class="lables">入住</span>
                                    {{ datas.check_in }}
                                </li>
                                <li>
                                    <span class="lables">楼层</span>
                                    {{ datas.floor }}
                                </li>
                                <li>
                                    <span class="lables">电梯</span>
                                    {{ datas.elevator }}
                                </li>
                                <li>
                                    <span class="lables">车位</span>
                                    {{ datas.parklot }}
                                </li>
                                <li>
                                    <span class="lables">用水</span>
                                    {{ datas.water }}
                                </li>
                                <li>
                                    <span class="lables">用电</span>
                                    {{ datas.electric }}
                                </li>
                                <li>
                                    <span class="lables">燃气</span>
                                    {{ datas.gas }}
                                </li>
                                <li>
                                    <span class="lables">采暖</span>
                                    {{ datas.heating }}
                                </li>
                                <li>
                                    <span class="lables">租期</span>
                                    {{ datas.lease_term }}
                                </li>
                                <li>
                                    <span class="lables">看房</span>
                                    需提前预防
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 配套标准 -->
                    <div class="transaction">
                        <div class="name">配套标准</div>
                        <div class="content">
                            <ul class="match-list">
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/washer.jpg') }}" alt="">
                                    <span>洗衣机</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/aircon.jpg') }}" alt="">
                                    <span>空调</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/wardrobe.jpg') }}" alt="">
                                    <span>衣柜</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/TV.jpg') }}" alt="">
                                    <span>电视</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/fridge.jpg') }}" alt="">
                                    <span>冰箱</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/geyser.jpg') }}" alt="">
                                    <span>热水器</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/bed.jpg') }}" alt="">
                                    <span>床</span>
                                </li> 
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/heater.jpg') }}" alt="">
                                    <span>暖气</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/wifi.jpg') }}" alt="">
                                    <span>宽带</span>
                                </li>
                                <li class="match-item">
                                    <img src="{{ url_for('static',filename='images/nargas.jpg') }}" alt="">
                                    <span>天然气</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 广告位 -->
            <div class="advertising">
                <div class="recommend-first">
                    <p class="head">热门招聘</p>
                    <div class="recommend-item">
                        <a href="http://120.79.190.101/user/">
                            <img src="{{ url_for('static',filename='images/job.jpg') }}" alt="惠职招聘">
                            <p class="sysment">惠职招聘 职位来袭 一起寻找心目中的offer</p>
                            <p class="select">全国热门城市等您挑选~~~</p>
                            <p class="desc">绩效奖金 | 带薪年假...</p>
                        </a>
                    </div>
                </div>
                <div class="recommend-last">
                    <p class="head">火爆影集</p>
                    <div class="recommend-item">
                        <a href="http://112.74.83.39/movie/">
                            <img src="{{ url_for('static',filename='images/login.jpg') }}" alt="惠职招聘">
                            <p class="sysment">惠职影视 邀您共享 科技|灾难|动作|悬疑大片精彩不断</p>
                            <p class="select">精彩震撼大片火爆来袭~~~</p>
                            <p class="desc">历史|英雄|抗日...</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 费用详情 -->
        <div class="costdetail w" id="costdetail">
            <h3>费用详情</h3>
            <div class="cost-content">
                <div class="price-title">
                    <p class="title-info">年租价 当租期不足1年时租金可能会上浮，详询管家</p>
                </div>
                <div class="table_wrapper">
                    <ul class="table_title">
                        <li class="table_col">
                            付款方式
                            <span class="sub_title"></span>
                        </li>
                        <li class="table_col">
                            租金
                            <span class="sub_title">(元)</span>
                        </li>
                        <li class="table_col">
                            押金
                            <span class="sub_title">(元)</span>
                        </li>
                        <li class="table_col">
                            服务费
                            <span class="sub_title">(元)</span>
                        </li>
                        <li class="table_col">
                            中介费
                            <span class="sub_title">(元)</span>
                        </li>
                    </ul>
                    <div class="table_conent">
                        <ul class="table_row">
                            <li class="table_col payment">{{ datas.payment }}</li>
                            <li class="table_col rent_price">{{ datas.rent_price }}</li>
                            <li class="table_col">{{ datas.deposit }}</li>
                            <li class="table_col">{{ datas.service_price }}</li>
                            <li class="table_col">{{ datas.intermediary_price }}  </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 经纪人信息 -->
        <div id="broker" class="w">
            <div class="broker" style="width: 700px;">
                <div class="broker-tit">
                    <h2>经纪人信息</h2>
                </div>
                <div class="brokercon">
                    <div class="bro-left">
                        <img src="{{ datas.broker.broker_img }}" alt="{{ datas.broker.broker_name }}" title="{{ datas.broker.broker_name }}">
                    </div>
                    <div class="bro-right">
                        <div class="agent-detail-top">
                            <span class="agent-name">{{ datas.broker.broker_name }}</span>
                            <div class="agent-otherinfo">
                                <span class="pub-tag">综合经纪人</span>
                            </div>
                        </div>
                        <div class="agent-adress">
                            <span class="map-text">{{ datas.broker.shop_group }}</span>
                        </div>
                        <ul class="agent-data">
                            <li>
                                <span class="info-key">联系方式：</span>
                                <span class="info-value">{{ datas.broker.contact }}</span>
                            </li>
                            <li>
                                <span class="info-key">服务平台年限：</span>
                                <span class="info-value">{{ datas.broker.service_years }}</span>
                            </li>
                            <li>
                                <span class="info-key">个人成绩：</span>
                                <span class="info-value">{{ datas.broker.personal_score }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}